<template>
    <el-dialog title="设计表结构" v-model="visible" width="50%" :close-on-click-modal="false">
        <template #default>
            <div style="margin-bottom: 15px;">当前表：{{tableName }}</div>
            <el-tabs v-model="activeName" type="card">
                <el-tab-pane label="字段" name="字段">
                    <Field />
                </el-tab-pane>
                <el-tab-pane label="外键" name="外键">
                    <ForeignKey />
                </el-tab-pane>
            </el-tabs>
        </template>
        <template #footer>
            <el-button @click="cancel">取消</el-button>
            <el-button type="primary" @click="saveTableDesign">保存</el-button>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { ref, toRefs } from "vue"
import Field from "./field.vue"
import ForeignKey from "./foreignKey.vue"
import { useForeignKey } from '@/store/foreignKey.ts';
import { storeToRefs } from "pinia"
const useForeignKeyStore = useForeignKey()
import { useField } from '@/store/field.ts';
const useFieldStore = useField()
const { tableData: fieldTableData } = storeToRefs(useFieldStore)
const { tableData: foreignKeyTableData } = storeToRefs(useForeignKeyStore)
const props = defineProps({
    visible: {
        type: Boolean,
        default: true,
    },
    tableName: {
        type: String,
        default: '',
    }
})
const { visible, tableName } = toRefs(props)
const activeName = ref('字段')
const emit = defineEmits(['saveTableDesign', 'cancel'])
const saveTableDesign = () => {
    emit('saveTableDesign', {
        field: fieldTableData.value,
        foreignKey: foreignKeyTableData.value
    })
}
const cancel = () => {
    emit('cancel')
}
</script>
<style lang="sass" scoped>

</style>